<template>
    <div class="">
        <ezm-layout>
            <van-nav-bar
                    slot="nav"
                    title="网络请求实例"
            ></van-nav-bar>
            <ezm-scroll-box>
                <div class="pa-md">
                    <div class="mb-sm"># 点击按钮尝试</div>
                    <van-button
                            type="info"
                            block
                            :loading="loading"
                            @click="request1"
                    >普通参数请求
                    </van-button>
                    <van-button
                            class="mt-sm"
                            type="info"
                            block
                            :loading="loading"
                            @click="request2"
                    >链式调用请求
                    </van-button>
                </div>
            </ezm-scroll-box>
        </ezm-layout>
    </div>
</template>

<script>
    import EzmLayout from "@/components/layout/ezm-layout";
    import EzmScrollBox from "@/components/scroll/ezm-scroll-box";
    import {NavigateMixin} from "@/mixin/navigate.mixin";
    import {mock, mockUtil} from "@/utils/common.util";
    import {request} from "@/utils/request.util";
    import {DialogUtil} from "@/utils/project.util";

    export default {
        name: 'RequestDemoIndex',
        mixins: [NavigateMixin],
        components: {EzmScrollBox, EzmLayout},
        props: {},
        data() {
            return {
                loading: false,
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
            wrapperData(data, code = 200) {
                return {
                    code: code,
                    message: '',
                    data: data,
                }
            },
            request1() {
                mockUtil.mock(/request1/i, 'get', this.wrapperData("随机人名：@cname"));
                this.loading = true;
                request({
                    url: 'request1',
                    method: 'get',
                    params: {
                        p1: 2,
                    },
                }).then(resp => {
                    DialogUtil.alert(resp, '请求1反馈');
                }).finally(() => this.loading = false)
            },
            request2() {
                mockUtil.mock(/request2/i, 'get', this.wrapperData("随机英文名：@name"));
                this.loading = true;
                request('request2').get({p1: 2}).then(resp => {
                    DialogUtil.alert(resp, '请求2反馈');
                }).finally(() => this.loading = false)
            }
        }
    };
</script>

<style lang="less">

</style>